*{
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}
a{
    color:#333;
}
@mixin rect($width:800px,$height:100px){
    width:$width;
    height:$height;
}
@mixin cube($size:100px){
    width:$size;
    height:$size;
}
@mixin circle($size:40px){
    @include cube($size);
    border-radius: 50%;
}
@function randomColor(){
    $red:random(255);
    $blue:random(255);
    $green:random(255);
    @return rgba($red,$blue,$green,0.5);
}
@mixin bg(){
    background:randomColor();
}

%center{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
%tb{
    position:absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
%lr{
    position:absolute;
    left: 0;
    right: 0;
    margin: auto;
}


%mm{
    float: left;
}
.row{
    overflow: hidden;
}


$cols:12;
$break-point:(
    'sm':0,
    'md':650px,
    'lg':780px,
     'lgs':1200px
);
@each $key in map_keys($break-point){
    @for $i from 1 through $cols{
        .col-#{$key}-#{$i}{
            @extend %mm;
        }
    }
    $s:map_get($break-point,$key);
    @if($s==1){
        @for $i from 1 through $cols{
            .col-#{$key}-#{$i}{
                width:percentage($i/$cols);
            }
        }
    }@else{
        @media screen and (min-width:$s){
           @for $i from 1 through $cols{
                .col-#{$key}-#{$i}{
                    width:percentage($i/$cols);
                }
            } 
        }
    }
}

